<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>天成艺术</title>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="yes" name="apple-touch-fullscreen"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../css/login.css"/>
</head>
<body class="bg-09blue">
<div class="login-header pt10 pb10 fs14 typo-9cgray typo-white tc pr border-b-7ablue">
    <a class="pa icon-back" href="javascript: history.go(-1);"><i class="iconfont fs18 typo-9cgray">&#xe600;</i></a>
    注册
</div>
<div class="mt40 pl25 pr25 pb50 form-box">
    <form id="formSignup" action="">
        <fieldset>
            <legend class="hide">注册表单</legend>
            <p class="p10 border-b-7ablue input-item pr">
                <label for="name"><i class="iconfont mr10 fs14 typo-9cgray">&#xe60c;</i></label>
                <input id="name" class="bg-09blue fs14 typo-white" type="text" name="name" placeholder="请输入真实姓名"/>
                <i class="J_tooltip J_btnClose iconfont fs14 typo-white pa icon-tip" style="display: none;">&#xe6da;</i>
            </p>
            <p class="mt15 p10 border-b-7ablue input-item pr">
                <label for="gid"><i class="iconfont mr10 fs14 typo-9cgray">&#xe678;</i></label>
                <input id="gid" class="bg-09blue fs14 typo-white" type="number" name="gid" placeholder="请输入身份证号码"/>
                <i class="J_tooltip J_btnClose iconfont fs14 typo-white pa icon-tip" style="display: none;">&#xe6da;</i>
            </p>
            <p class="mt15 p10 border-b-7ablue input-item pr">
                <label for="mobile"><i class="iconfont mr10 fs14 typo-9cgray">&#xe614;</i></label>
                <input id="mobile" class="bg-09blue fs14 typo-white" type="number" name="mobile" placeholder="请输入手机号"/>
                <i class="J_tooltip J_btnClose iconfont fs14 typo-white pa icon-tip" style="display: none;">&#xe6da;</i>
            </p>
            <div class="verification-box">
                <button id="btnVerify" class="block p10 bor-r5 border-7ablue bg-9cblue fs14 typo-white lh1 fr">获取验证码</button>
                <p class="mt15 p10 border-b-7ablue input-item pr verification">
                    <label for="smscode"><i class="iconfont mr10 fs14 typo-9cgray">&#xe7c6;</i></label>
                    <input id="smscode" class="bg-09blue fs14 typo-white" type="text" name="smscode" placeholder="请输入验证码"/>
                </p>
            </div>
            <p class="mt15 p10 border-b-7ablue input-item pr">
                <label for="password"><i class="iconfont mr10 fs14 typo-9cgray">&#xe7c6;</i></label>
                <input id="password" class="bg-09blue fs14 typo-white" type="password" name="password" placeholder="请输入密码"/>
                <i class="J_tooltip J_btnShow iconfont fs14 typo-white pa icon-tip" style="display: none;">&#xe63d;</i>
            </p>
            <p class="mt15 p10 border-b-7ablue input-item pr">
                <label for="password_again"><i class="iconfont mr10 fs14 typo-9cgray">&#xe7c6;</i></label>
                <input id="password_again" class="bg-09blue fs14 typo-white" type="password" name="password_again" placeholder="请确认密码"/>
                <i class="J_tooltip J_btnShow iconfont fs14 typo-white pa icon-tip" style="display: none;">&#xe63d;</i>
            </p>
            <p class="mt15 p10 border-b-7ablue input-item pr">
                <label for="inviter"><i class="iconfont mr10 fs14 typo-9cgray">&#xe614;</i></label>
                <input id="inviter" class="bg-09blue fs14 typo-white" type="number" name="inviter" placeholder="请输入邀请人手机号（选填）"/>
                <i class="J_tooltip J_btnClose iconfont fs14 typo-white pa icon-tip" style="display: none;">&#xe6da;</i>
            </p>
            <p class="mt15 p10">
                <input id="protocol" class="mr10 vm checkbox" name="protocol" type="checkbox"/>
                <label class="fs14 typo-white vm" for="protocol">我已阅读并同意<a class="J_protocolDetail fs14 typo-ffyellow ml5" href="javascript:void(0);">《风险提示书》</a></label>
            </p>
            <button class="block bg-9cblue bor-r5 mt20 pt10 pb10 fullwidth tc fs14 typo-white btn-default" type="submit">
                <i class="J_loading inblo mr5 pr vm loading-box" style="display: none;"><span class="iconfont fs14 fn pa animate-rotate">&#xe67c;</span></i>
                注册
            </button>
        </fieldset>
    </form>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.4/layer.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/3.51/jquery.form.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="../js/jquery.validate.extend.js"></script>
<script>
    $(function() {
        /**
         * 清空input框/显示密码
         */

        // input框激活时显示按钮
        $('input').focus(function() {
            $(this).siblings('.J_tooltip').show().parent().siblings().find('.J_tooltip').hide();
        });

        $('.J_tooltip').on('click', function() {
            var _currentInput = $(this).siblings('input'),
                    currentInputAttr = _currentInput.attr('type');

            // 按钮-清空
            if($(this).hasClass('J_btnClose')) {
                _currentInput.val('');
            }

            // 按钮-显示隐藏密码
            else if($(this).hasClass('J_btnShow')) {
                if(currentInputAttr == 'password') {
                    _currentInput.attr('type', 'text');
                } else{
                    _currentInput.attr('type', 'password');
                }
            }
            _currentInput.focus();
        });

        /**
         *  获取验证码
         */
        (function($) {
            var i = 60,
                    _btnVerify = $('#btnVerify');
            _btnVerify.on('click', function() {
                var mobile = $('#mobile').val();
                $.ajax({
                    type: 'post',
                    data: {mobile: mobile},
                    dataType: 'json',
                    url: '',
                    timeout: 5000,
                    error: function(resp) {

                        // 60s倒计时
                        var timer = setInterval(function() {
                            if(i > 0) {
                                i--;
                                _btnVerify.attr("disabled", true).html("重新获取(" + i + "s)");
                            } else{
                                _btnVerify.attr("disabled", false).html("获取验证码");
                                i= 60;
                                layer.msg('验证码已失效，请重新获取');
                                clearInterval(timer);
                            }
                        }, 1000);
                    }
                });
            });
        })(jQuery);

        /**
         * 风险提示书
         */
        $('.J_protocolDetail').on('click', function() {

            //捕获页
            layer.open({
                type: 1,                                       // 页面层
                shade: 0.6,                                    // 背景遮罩
                shadeClose: true,                             // 是否点击遮罩关闭
                title: false,                                 // 不显示标题
                btn: '同意协议',                               // 关闭按钮
                content: $('.layer_notice'),                   // 捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                yes: function(index){                         // 确定按钮的回调函数

                    // 同意协议
                    $('#protocol').attr('checked', 'checked');
                    layer.close(index);
                }
            });
        });

        /**
         * 注册验证
         */
        var _formSignup = $('#formSignup');
        _formSignup.validate({
            rules: {                                           // 验证规则
                name: {                                        // 验证项-姓名
                    required: true                            // 必填
                },
                gid: {                                         // 验证项-身份证号
                    required: true,                           // 必填
                    isIdCard: true                            // 身份证格式验证
                },
                mobile: {                                      // 验证选项-mobile
                    required: true,                           // 必填
                    isPhone: true,                            // 手机格式验证
                    remote: {                                  // 手机号后台验证
                        url: "http://api.zhej360.com/user/mobileIsExist",
                        type: "post",
                        dataType: "text",
                        data: {
                            mobile: function() {
                                return $('#mobile').val();
                            }
                        }
                    }
                },
                smscode: {
                    required: true
                },
                password: {
                    required: true,
                    minlength: 6
                },
                password_again: {
                    required: true,
                    minlength: 6,
                    equalTo: '#password'
                },
                inviter: {
                    isPhone: true
                }
            },
            messages: {                                        // 报错信息
                name: {                                        // 验证项-账户
                    required: "请输入姓名"                     // 必填
                },
                gid: {                                         // 验证项-身份证号
                    required: "请输入身份证号",                // 必填
                    isIdCard: "身份证号格式不正确"             // 格式验证
                },
                mobile: {                                      // 验证选项，对应表单项的name
                    required: "请填写您的账户",                // 为空时的报错信息
                    isPhone: "账户格式不正确"                  // 格式不对时的报错信息
                },
                smscode: {
                    required: "请输入验证码"
                },
                password: {
                    required: "请输入您的密码",
                    minlength: $.validator.format("至少{0}个字符")
                },
                password_again: {
                    required: "请重新输入您的密码",
                    minlength: $.validator.format("至少{0}个字符"),
                    equalTo: "两次输入的密码不同"
                },
                inviter: {
                    isPhone: "手机格式不正确"
                }
            },
            focusInvalid: false,                               // 取消验证时，未通过验证元素获取焦点
            onkeyup: false,                                    // 取消keyup时验证
            focusCleanup: true,                                // 未通过元素获取焦点时，移除错误提示
            errorClass: "error",                                // 错误提示自定义样式
            submitHandler: function(form) {                    // 验证成功之后，提
                if($('#protocol').is(':checked')) {
                    var params = _formSignup.serialize(),
                            options = {
                                type: "post",
                                data: params,
                                dataType: "json",
                                timeout: 5000,
                                url: "http://api.zhej360.com/user/login",  // 注册后台验证接口
                                beforeSend: function() {
                                    _formSignup.find(".J_loading").show();
                                },
                                success: function(resp) {
                                    if(resp.status == 1) {

                                        // 成功,跳转登录页
                                        _formSignup.find(".J_loading").hide();
                                        layer.msg("注册成功");
                                        setTimeout(function() {
                                            document.location.href = "login.html";
                                        }, 3000);
                                    }
                                },
                                complete: function(XMLHttpRequest, status) {
                                    if(status == "timeout") {

                                        // 超时提示
                                        _formSignup.find(".J_loading").hide();
                                        layer.msg("Oops,请求超时");
                                    }
                                }
                            };
                    $(form).ajaxSubmit(options);
                    return false;
                } else{
                    layer.msg('请阅读并同意风险提示');
                }
            }
        });
    });
</script>
</body>
<div class="layer_notice" style="display:none">
    <div class="pt25 pb15 pl15 pr15 fs14 protocol-detail">
        <h3 class="tc fn fs16">《风险提示书》</h3>
        <div class="mt10">尊敬的用户:</div>
        <p class="mt10">因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化</p>
        <p class="mt10">因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化</p>
        <p class="mt10">因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化</p>
        <p class="mt10">因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化</p>
        <p class="mt10">因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化</p>
        <p class="mt10">因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化</p>
        <p class="mt10">因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化</p>
        <p class="mt10">因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化</p>
        <p class="mt10">因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化</p>
        <p class="mt10">因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化</p>
        <p class="mt10">因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化</p>
        <p class="mt10">因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化因国家宏观经济形势变化</p>
    </div>
</div>
</html>